Liquid Glass - Structure, Variants and Design Guidelines 結構、變體與設計（指南）

瞭解Liquid Glass的構造方式和一些關鍵行為模式，這樣你在開始使用它進行介面設計時就能有清晰的預期和理解。

Liquid Glass 最厲害的地方在於它的設計是整體協同的，光效、深度效果、自適應機制等都不是彼此獨立的功能，而是融合在一個複雜系統中的多個層級，不是單獨加進去的，所以看起來特別完整高階。

highlights layer 高光層

Liquid Glass 所在的環境模擬現實世界中的光照行為。這個環境中的光源會照射到 Liquid Glass 材質上，產生符合其幾何形狀的高光效果，高光會根據玻璃的形狀變化，看起來和現實中的玻璃一樣自然。

比如你鎖屏或解鎖的時候，玻璃上的光會動，像光在玻璃上滑過去一樣，把邊緣勾勒得很清楚。有時你動一下手機，玻璃上的光也會跟著變，像它知道自己在現實中怎麼動了一樣。

Shadows 陰影層

陰影在幫助介面元素產生“落地感”和視覺邊界方面也起著關鍵作用。陰影變化提供了內容分離的視覺輔助，確保介面元素始終易於識別與操作。

當玻璃元素位於文字上方時，它會自動識別背景內容並讓陰影變得濃一些，從而增強前景元素的可見性與界限感。

相反，當它位於淺色純背景上時，陰影會變得更淺，以避免視覺上的干擾和多餘的厚重感。

Feedback Illumination 內部發光反饋

當你與 Liquid Glass 互動時，材質會從內部發光，作為一種觸控反饋形式.發光效果從你手指觸碰的位置開始擴散，蔓延到整個元件，甚至影響附近的其他 Liquid Glass 元素，與材質的柔性動態屬性協同作用，營造出自然流暢的反饋體驗。

這些動效讓介面感覺像有生命一樣，並且與現實世界的物理規律和裝置的輸入系統建立了直接聯絡。

Focus Transition 聚焦變化

有時候好幾層會一起調整，確保介面清晰、重點明確。例如，在 Mac 或 iPad 上當你切換視窗，玻璃會自動變暗或退後，讓你專注在當前視窗上。

Behaviors are built-in 行為模式已內建

這些高階動效都是系統自帶的，你只要用了 Liquid Glass，效果就自動有了。

A Liquid Glass 最適合用於懸浮於內容之上的導航層（如工具欄、標籤欄等），這樣能最大程度地發揮其視覺特性，同時避免介面層級混亂。

比如這個表格檢視（tableview），如果把它做成 Liquid Glass，會和其他介面元素“搶視覺焦點”，導致層級混亂。所以它應當保留在內容層，以維持介面的清晰度與層次感。

B Avoid glass-on-glass：千萬不要將多個 Liquid Glass 元素堆疊在一起,否則介面很快就會顯得擁擠雜亂，失去清晰的層次感。用點透明或半透明的色塊就行，這樣才不顯得厚重。

這兩種變體不能混用，因為它們具有不同的視覺特性和各自專屬的使用場景。如果混用，會導致介面不一致或使用者困惑。

Regular 常規款

Regular 是最通用、最常用的版本。Regular 版本包含了所有視覺和自適應特性，能在任何介面上下文中保持良好的可讀性。它適用於任何尺寸、任何背景內容，並且可以在其上方放置其他元素而不影響效果。

Clear 清透款

Clear 版本沒有自適應行為。它始終保持更高的透明度，適合讓下面的內容“露出來”，與玻璃材質產生美觀的互動視覺效果。

這個版本透明度高，但要看得清上面的字或圖示，得把底下背景稍微暗一點，不然就會很難看清。如果玻璃用得小，你可以只讓它下面那塊背景變暗，讓其他區域保留原有的鮮明色彩和活力。

Clear 只有在符合下面三個條件時才適合用：

1 Media-rich多媒體豐富的內容

Clear 應該應用在“多媒體內容豐富”的背景上（比如圖片、影片、動畫等），這樣高透明度才有視覺意義。

2 Dimming layer 暗化背景層

調暗之後內容依然可感知，不會失真或變得難看。

3 Bold content 醒目的內容

上方的內容必須足夠鮮明和明亮（如白色圖示、大字號文字），以便在通透材質下仍然清晰可辨。